<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
    <script src="vue.js"></script>
</head>
<body>
<!-- view -->
<div id="app1">
    <!-- {{插值表达式}}必须被vue监视的地方 -->
    {{message}}<br>
    {{user.msg}}<br>
    {{user.age+user.age*21}}
</div>

{{message}}<br>
{{user.msg}}<br>
{{user.age+user.age*21}}
<script>
    //vue是一个js，我们必须在script标签中，写vue的东西 MVVM中的 M和VM!
    //vue实例 是一个类，new 对象，通过构造方法注入一个对象！
    let vm = new Vue({//VM view-model
        //这个Vue实例，要绑定一个受到vue监视的dom节点~！有且只能有一个！
        el:"#app1",
        //data指的是model
        data:{
            message:"显示的msg 欢迎学习vue！",
            user:{
                msg:"小明！",
                age:18
            }
        },
    });
</script>
</body>
</html>
